#@layout()
#define main()
<div class="container">
    <div id="toolbar">
        <button class="btn btn-primary" onclick="edit_modal()">编辑</button>
        <button class="btn btn-primary" onclick="del()">删除</button>
    </div>
    <div class="row">
        <table id="table" class="table table-striped table-bordered" style="width:100%">

        </table>
    </div>
</div>
<div class="modal fade" id="edit_form" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">修改</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div id="img_show" class="modal-body text-center">
                <form id="form" enctype="multipart/form-data" action="/app/update" method="post" onsubmit="return add()">
                    <input id="id" name="id" hidden>
                    <div class="form-row form-group">
                        <label for="name">名称:</label>
                        <input id="name" name="name" type="text" class="form-control">
                    </div>
                    <div class="form-row form-group">
                        <label for="logo">logo:</label>
                        <input id="logo" name="logo" type="file" class="form-control">
                        <input id="logoUrl" name="logoUrl" type="text" class="form-control" placeholder="http url" onchange="hideFile(this)">
                    </div>
                    <div class="form-row form-group">
                        <label for="ico">ico:</label>
                        <input id="ico" name="ico" type="file" class="form-control">
                        <input id="icoUrl" name="icoUrl" type="text" class="form-control" placeholder="http url" onchange="hideFile(this)">
                    </div>
                    <div class="form-row form-group">
                        <label for="redirectUrl">跳转:</label>
                        <input id="redirectUrl" name="redirectUrl" type="text" class="form-control">
                    </div>
                    <div class="form-group">
                        <label for="open">是否公开:</label>
                        <select id="open" name="open" class="form-control">
                            <option value="true" selected>是</option>
                            <option value="false">否</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="type">类型:</label>
                        <select id="type" name="type" class="form-control">
                            <option value="1" selected>公共</option>
                            <option value="2">运营</option>
                            <option value="3">研发</option>
                            <option value="99">其它</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" onclick="save()">保存</button>
                <button class="btn btn-secondary" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>
#end

#define script()
#@dataTable()
<script>
    var table =null;
    $(function () {
        //单选
        table = $('#table').bootstrapTable({
            url:"/app/list",
            queryParams : function (params) {
                return {
                    pageSize: params.limit,                         //页面大小
                    pageIndex: (params.offset / params.limit) + 1,   //页码
                    sort: params.sort,      //排序列名
                    sortOrder: params.order //排位命令（desc，asc）
                };
            },
            pagination: true,
            sidePagination:"server",
            pageNumber:  1,
            pageSize: 10,
            search: false,
            clickToSelect:true,
            singleSelect:true,
            toolbar:"#toolbar",
            columns:[
                {checkbox: true,visible: true},
                {field:"id",title:"ID",visible: false},
                {field:"name",title:"名称"},
                {field:"ico",title:"ICO",width:"100px;"},
                {field:"logo",title:"LOGO",width:"100px;"},
                {field:"redirect_url",title:"跳转链接",width:"100px;"},
                {
                    field: "open", title: "是否公开", formatter: function (value, row) {
                        if (value === true) {
                            return "公开";
                        } else {
                            return "私有";
                        }
                    }
                },
                {
                    field: "type", title: "类型", formatter: function (value, row) {
                        switch (value) {
                            case 1:
                                return "公共";
                            case 2:
                                return "运营";
                            case 3:
                                return "研发";
                            case 99:
                                return "其它";
                        }
                    }
                }
            ]
        });

    });

    function edit_modal() {
        $("#form").clearForm(true);

        var data = table.bootstrapTable('getSelections')[0];
        if(data === undefined){
            return;
        }
        $("#id").val(data.id);
        $("#name").val(data.name);
        $("#redirectUrl").val(data.redirect_url);
        $("#open option[value='"+data.open+"']").prop("selected", true);
        $("#type option[value='"+data.type+"']").prop("selected", true);
        $("#edit_form").modal();

    }

    function save() {
        $("#form").ajaxSubmit(function (data) {
            alert("更新成功");
            table.bootstrapTable('refresh');
            $("#edit_form").modal('hide');
        });
    }

    function del() {
        var data = table.bootstrapTable('getSelections')[0];
        if(data === undefined){
            return;
        }

        Confirm({
            msg: '确认删除'+data.name +"吗？",
            onOk: function(){
                $.ajax({
                    url:"/app/del",
                    data:{
                        id:data.id
                    },
                    success:function (data) {
                        table.bootstrapTable('refresh');
                    }
                })

            },
            onCancel: function(){

            }
        });


    }

    function add(){
        var name = $("#name").val();
        if(name === undefined || name=== ''){
            alert("名称不能为空");
            return false;
        }
    }

    function hideFile(url) {
        console.log(url.value);
        var value = url.value;
        var id  = url.id;
        if(value !== undefined && value !== ''){
            if(!IsURL(value)){
                alert("请输入正确的网址");
                url.value='';
                if(id === "logoUrl"){
                    $("#logo").show();
                } else {
                    $("#ico").show();
                }
                return;
            }
            if(id === "logoUrl"){
                $("#logo").hide();
            } else {
                $("#ico").hide();
            }
        } else {
            if(id === "logoUrl"){
                $("#logo").show();
            } else {
                $("#ico").show();
            }
        }
    }
    function IsURL (str_url) {
        var strRegex = '^((https|http|ftp|rtsp|mms)?://)'
            + '(([0-9]{1,3}.){3}[0-9]{1,3}' // IP形式的URL- 199.194.52.184
            + '|' // 允许IP和DOMAIN（域名）
            + '([0-9a-z_!~*\'()-]+.)*' // 域名- www.
            + '([0-9a-z][0-9a-z-]{0,61})?[0-9a-z].' // 二级域名
            + '[a-z]{2,6})' // first level domain- .com or .museum
            + '(:[0-9]{1,4})?' // 端口- :80
            + '((/?)|' // a slash isn't required if there is no file name
            + '(/[0-9a-z_!~*\'().;?:@&=+$,%#-]+)+/?)$';
        var re=new RegExp(strRegex);
        //re.test()
        if (re.test(str_url)) {
            return true;
        } else {
            return false;
        }
    }
</script>
#end